<script setup>
const props = defineProps({
  name: { type: String, default: "页面标题" },
  dividerEnable: { type: Boolean, default: true },
});
</script>

<template>
  <div id="PageMain">
    <!-- 标题栏顶部插槽 -->
    <div class="page-main-header">
      <span
        v-if="name"
        class="name"
        >{{ name }}</span
      >
      <slot name="header-bar" />
    </div>
    <!-- 分割线 -->
    <el-divider v-if="dividerEnable" />
    <!-- 主题页面内容 -->
    <el-scrollbar class="page-main-body">
      <slot />
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
#PageMain {
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color);
  .page-main-header {
    padding: 10px;
    .name {
      font-size: 22px;
      display: inline-block;
      margin-right: 4px;
    }
  }
  .el-divider {
    margin: 0;
  }
  .page-main-body {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    & > :deep(.el-scrollbar__wrap) {
      .el-scrollbar__view {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
